
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%-- <% response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","No-cache"); response.setDateHeader("Expires", -1); response.setHeader("Cache-Control", "No-store"); %>
<!-- 宠物描述中图片溢出解决：设置图片描述后通过js设置img为响应式，具体参考index。js中对图片自适应的处理 --> --%>
<!DOCTYPE html>
<html lang="en">
<!-- base标签为页面上的所有链接规定默认地址或默认目标 -->
<base href="<%=basePath%>">
<head>
<meta charset="UTF-8">
<title>item</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/item.css">
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/js/item.js"></script>
<script src="${pageContext.request.contextPath}/js/header.js"></script>
</head>
<body>
	<div id="header">
		<jsp:include page="common/header.jsp" flush="true" />
		<!-- nav导航栏
		<nav class="navbar navbar-inverse  navbar-fixed-top" role="navigation">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#a">
				<span class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>

			</button>
			<div class="container-fluid">
				<div class="navbar-header">
					<a class="navbar-brand" href="#">PETCLUB</a>
				</div>
				<div>
					<ul class="nav navbar-nav collapse navbar-collapse" id="a">
						<li class="active"><a href="#">首页</a></li>
						<li><a href="#">市场</a></li>
						<li><a href="#">论坛</a></li>
						<li><a href="#">我的家园</a></li>
						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown"> <i class="glyphicon glyphicon-user"></i>
								个人中心 <b class="caret"></b>
						</a>
							<ul class="dropdown-menu" style="background-color: ghostwhite">
								<li class="" style=""><a href="#"><i
										class="glyphicon glyphicon-log-in"></i>&nbsp;&nbsp;登录</a></li>
								<li class="divider"></li>
								<li class="" style=""><a href="#"><i
										class="glyphicon glyphicon-registration-mark"></i>&nbsp;&nbsp;登录</a>
								</li>
							</ul></li>
					</ul>


				</div>
			</div>
		</nav> -->
		<!--附加导航栏-->
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-3" style="">
					<a href="#" style="padding: 0 21%" class=""><img
						src="images/PETCLUB2.png" alt=""></a>
				</div>
				<div class="col-md-9" style="">
					<!-- <div class="form-group" style="position: absolute;top:50%;transform:translateY(-50%); ">
                     <input class="search" type="text" list="list" name="search" title="I am looking for..."
                            value="I am looking for... " style="width: 350px">
                     <input type="submit" name="submit">
                 </div>-->
					<div class="input-group pull-right"
						style="width: 40%; padding: 1.2%">
						<input class="form-control searchInput" type="text" list="list"
							placeholder="I am looking for..."> <span
							class="input-group-btn">
							<button class="btn btn-default0" type="submit">
								<i class="glyphicon glyphicon-search searchBtn"></i>
							</button>
						</span>
					</div>
					<datalist id="list">
						<option>宠物猫</option>
						<option>宠物狗</option>
					</datalist>
				</div>
			</div>


		</div>
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-info">

						<div class="panel-heading">
							<a id="back"><i class="glyphicon glyphicon-arrow-left"></i>返回上一级</a>
						</div>
						<div class="panel-body">
							<div class="" style="border: 1px solid gainsboro">
								<div class="col-md-6" style="">
									<div style="padding-top: 5%">
										<!-- 此处可加上：<a href="${item.image} target='_blank'"></a>实现点击图片请求图片 -->
										<a class="thumbnail" href="${item.image}" target="_blank"><img
											style="border: 2px solid #d4d0cd" src=" ${item.image} "
											class="" alt=""></a>
										<!--  <img src="../images/dogitem.jpg" class="" alt=""> -->
									</div>
									<!-- <div class="" style="padding-top: 11%">
										<button class="btn bg-primary">上一张</button>
										<button class="btn bg-primary">下一张</button>
									</div> -->
								</div>

								<div class="col-md-6">
									<div class="panel panel-default">
										<div class="panel-heading">
											<h4>
												<i class="glyphicon glyphicon-fire" style="color: firebrick"></i>标题:${item.title}
											</h4>

										</div>
										<div class="panel-body">
											<ul class="list-group">
												<li class=" list-group-item list-group-item-success"><b>名字:：<span
														class="label label-info">${item.name}</span></b></li>
												<li class="list-group-item list-group-item-success"><b>当前状态:：<span
														class="label label-info"> <c:choose>
																<c:when test="${item.status==1}">
																	<span class="label label-info">待领养</span>
																</c:when>
																<c:when test="${item.status==2}">
																	<span class="label label-info" style="color: red;">已被领养</span>
																</c:when>
																<c:otherwise>：<span
																		class="label label-info">未知</span>
																</c:otherwise>
															</c:choose></b></li>
												<li class="list-group-item list-group-item-success"><h5>
														<b class="">年龄:<span class="label label-info"
															style="font-size: medium">${item.age}岁</span>
														</b>
													</h5></li>
												<li class="list-group-item list-group-item-success"><h5>
														<b class="">性别:<span class="label label-info"
															style="font-size: medium">${item.sex}</span>
														</b>
													</h5></li>
												<li class="list-group-item list-group-item-success"><h5>
														<b>健康状态：<span class="label label-info">${item.health}</span></b>
													</h5></li>

											</ul>
										</div>
										<div class="panel-footer">
											<ul class="list-group list-inline" style="padding-left: 20%">
												<!-- <li class="list-group-item-info">
													点击收藏夹按钮，ajax请求后台操作收藏夹，将商品添加到对应用户的收藏夹，成功后弹出收藏成功
													<button class="btn btn-info add_to_cart">添加到购物车</button>
												</li> -->
												<li class="list-group-item-info" style="padding-left: 2%">
													<!-- 点击立即申请功能实现思路 ：
														1.貌似跳转前需要将商品信息设置为request中的属性传递到订单页面（或者传递商品id）
														2.页面跳转到创建订单order页面--> <c:if test="${item.status==1 }">
														<button class="btn btn-info apply_now">&nbsp;&nbsp;立即申请&nbsp;&nbsp;</button>
													</c:if> <c:if test="${item.status==2 }">
														<button disabled="true" class="btn btn-info apply_now">&nbsp;&nbsp;已被领养&nbsp;&nbsp;</button>
													</c:if>
												</li>
												<!-- 可改为收藏夹：点击后跳转到收藏夹页面 -->
												<li class="list-group-item-info collection-li"
													style="padding-left: 3%"><a class="collection-link"><i
														class="glyphicon glyphicon-heart"
														style="font-size: larger; color: grey"></i></a></li>
												<li class="contactus list-group-item-info pull-right"><a
													href="javascript:void(0);" data-toggle="modal" data-target="#myModal">联系我们</a></li>
											</ul>
										</div>

									</div>
								</div>
							</div>
						</div>
						<div class="well col-md-12">
							<center>
								<button class="btn btn-default seeMore" style="padding: 0 8%">
									<!-- 点击查看更多功能实现思路：
										1.在本按钮下方设置一个div隐藏域
										2.设置按钮的点击事件，点击按钮后ajax异步请求后台获取商品item的描述数据item_desc
										3.将获取到的商品描述数据设置到div隐藏域中，并且设置div隐藏域为可见状态 -->
									点击查看更多<i class="glyphicon glyphicon-arrow-down"></i>
								</button>
							</center>
							<div class="col-md-12" id="itemDescBox" hidden="hidden" style=""></div>
						</div>
						<div class="panel-footer"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">
						<b>联系我们</b>
					</h4>
				</div>
				<div class="modal-body">
					<ul style="list-style: none">

						<li>联系电话：020-123456</li>
						<li>QQ：15940xxxxx</li>
						<li>邮箱：1881414xxxx.163.com</li>
						<li>地址：广州市海珠区仲恺路500号某栋房子</li>
					</ul>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<!--<button type="button" class="btn btn-primary">
					提交
				</button>-->
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
function centerModals() {   
$('#myModal').each(function(i) {   
var $clone = $(this).clone().css('display','block').appendTo('body');
var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
top = top > 0 ? top : 0;   
$clone.remove();   
$(this).find('.modal-content').css("margin-top", top);   
});   
};

	$('#myModal').on('show.bs.modal', centerModals);
	//禁用空白处点击关闭
	$('#myModal').modal({
	backdrop: 'static',
	keyboard: false,//禁止键盘
	show:false
	});
	//页面大小变化是仍然保证模态框水平垂直居中
	$(window).on('resize', centerModals);
	$(function() {
		
		
		var cflag=false ;
		var chref;
		$("#back").click(function(){
			window.history.go(-1);
		});
		
		if( $.cookie("TT_TOKEN")){
			$.ajax({
				url:"http://localhost:8080/distribute-portal/collection/check-collection/${itemId}.html",
				success:function(data){
					alert("exist:"+data);
					if(data=="exist"){
						;
						/* chref = 'http://localhost:8080/distribute-portal/collection/add/${item.id}.html'; */
						/* var html='<a class="collection-link" ><i class="glyphicon glyphicon-heart" style="font-size:larger;color: red"></i></a>';
						$(".collection-li").html(html); */
						$(".collection-link i:first").attr("style","font-size:larger;color: red");
						cflag=true
					}
					
				}
			});
			
		};
		
		/*  session过期 会错 */
		var isAjax = false;
		$(".collection-link").click(function(){
			if(isAjax){
				return;
			}
			isAjax=true;
			var _ticketx = $.cookie("TT_TOKEN");
			if (!_ticketx) {
				alert("请先登录！！！");
				isAjax=false;
				return;
			}
			$
					.ajax({
						url : "http://localhost:8080/distribute-sso/user/token/"
								+ _ticketx,
						dataType : "jsonp",
						type : "GET",
						success : function(data) {
							if (data.status == 200) {
								window.loginTag=true;
							}else{
								window.loginTag=false;
							}
						}
					});
			if(!window.loginTag){
				isAjax=false;
				alert("请先登录！！！");
				return; 
			}else{
			if(cflag){
				$.ajax({
					url:'http://localhost:8080/distribute-portal/collection/rest/delete/${item.id}.html',
					success:function(data){
						if(data=="success"){
							$(".collection-link i:first").attr("style","font-size:larger;color: grey");
							/* var html='<a class="collection-link" ><i class="glyphicon glyphicon-heart" style="font-size:larger;color: grey"></i></a>';
							$(".collection-li").html(html); */
							cflag=false;
							alert("已取消收藏！");
							isAjax=false;
						}
					}
				})
			}else{
				$.ajax({
					url:'http://localhost:8080/distribute-portal/collection/rest/add/${item.id}.html',
					success:function(data){
						if(data=="success"){
							$(".collection-link i:first").attr("style","font-size:larger;color: red");
							/* var html='<a class="collection-link" ><i class="glyphicon glyphicon-heart" style="font-size:larger;color: red"></i></a>';
							$(".collection-li").html(html); */
							cflag=true;
							alert("收藏成功！");
							isAjax=false;
						}
					}
				})
			}
			}});
		//点击查看更多按钮click处理
		var sflag = true;
		$('.seeMore').click(function() {
			if(sflag){
				$('.seeMore').text("收起");
				sflag = false;
				//ajax异步请求商品描述数据
				$.ajax({
					url:'item/desc/${item.id}.html',
					success:function(data){
						$("#itemDescBox").removeAttr("hidden");
						$("#itemDescBox").html(data);
						$("img").addClass("img-responsive center-block");
					},
				});
				//删除hidden使得商品描述可见
				$("#itemDescBox").removeAttr("hidden");
			}else{
				$('.seeMore').text("点击查看更多");
				$("#itemDescBox").attr("hidden","hidden");
				sflag=true;
			}
			
		});

	});
	//立即申请按钮
	$(".apply_now").click(function(){
		var token = $.cookie("TT_TOKEN");
		window.location.href='http://localhost:8080/distribute-portal/order/order-settlement/${itemId}'+'.html';
		});
	
	// 格式化商品的状态
	var formatItemStatus = function formatStatus(val) {
		if (val == 1) {
			return '正常';
		} else if (val == 2) {
			return '<span style="color:red;">下架</span>';
		} else {
			return '未知';
		}
	};
</script>
</html>